/* ====================================== toast  ====================================== */
import React from 'react'
import { Input, InputNumber } from 'antd'
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'
// =====================================================================
const { $fn, $Lazy } = window
const Button = $Lazy.load(()=>import('@antd/button'))
// ===================================================================== Select
class Index extends React.Component {
	state = { }
	
	onChange = e => {
		const { onChanged, onChange, name, mode, outer } = this.props
		let value = mode === 'number' ? e : ($fn.isObject(e)? e.target.value : e) 
		
		if(name === 'spec_code' && $fn.isString(value) && value.indexOf('-') !== -1 && !mode ){
			value = value.replace('-','')
			value = value.replace(/\s*/g,'')
		}
		
		if(!outer){ this.setState({ value }) }
		
		value = mode === 'number' || mode === 'textarea' ? value : ( $fn.isString(value) ? value.trim() : value )
		onChanged?.({
			model: name ? { [name]: value } : value, 
			value
		})
		onChange?.(value)
	}
	
	onSearch = v => {
		const { onChange, onChanged, name } = this.props
		const { value } = this.state
		onChanged?.({
			model: name ? { [name]: value } : value, 
			value
		})
		onChange?.(value)
	}
	
	setValue = value => {
		this.setState({ value })
		this.onChange(value)
	}
	
	getValue = () => this.state.value
	
	clear = () => this.setValue('')
	
	render(){
		let  { 
			p, type, width, size = 'small', clear, style, isCenter,
			readOnly, className, mode, disabled, prefix, suffix, bordered, value, rows, onEnter, onKeyUp, onKeyDown, onFocus, onClick,
			btn,max, afterSuffix, minValue, afterText, onBlur, autoFocus, onPressEnter, id
		} = this.props
		value = this.state.value === undefined ? value : this.state.value
		let centerStyle = isCenter ? {textAlign:'center'} : null
		const _bordered = bordered === false ? false : true
		let MyInput = mode === 'password' ? Input.Password : Input
		const props = mode === 'password' ? { iconRender : visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined /> ) } : {}
		let borderClass = bordered===false ? 'input-bordered':''
		let allowClear = { allowClear: clear === false || readOnly ? false : true }
		if(mode === 'textarea'){
			MyInput = Input.TextArea
			borderClass = bordered===false ? 'textarea-bordered':''
		}else if(mode === 'number'){
			MyInput = InputNumber
			if( !isNaN(+minValue) && value< minValue) value = minValue
			delete allowClear.allowClear
		}
		const len = value ? value.length : 0
		const AfterSuffix = typeof afterSuffix === 'function' ? afterSuffix() : afterSuffix
		return (
			<div id={id} className={`fxm ex ${ len > max && !disabled ? 'max-error' : ''} `} onClick={e=> e.stopPropagation()} onDoubleClick={e=> e.stopPropagation()}>
				<MyInput
					className		= { `${className?className:''} ${borderClass||''} ex` }
					// allowClear 		= { clear === false || readOnly ? false : true } 
					{...allowClear}
					type			= { type } 
					size			= { size } 
					onChange		= { this.onChange }
					value		 	= { value }
					style			= {{width,...centerStyle,...style}}
					placeholder		= { p } 
					readOnly		= { readOnly }
					disabled		= { disabled }
					prefix			= { _bordered ? null : prefix }
					suffix			= { _bordered ? null : ((max && !disabled ? <span className='max-count f12 g6'>{len}/{max}</span> : suffix) : suffix) }
					// addonBefore		= { _bordered ? prefix: null }
					// addonAfter		= { _bordered ? after: null }
					bordered		= { _bordered }
					rows			= { rows || 4 }
					maxLength       = { max || ''}
					onPressEnter    = { onEnter ? e => onEnter(e.target.value) : onPressEnter }
					onKeyUp			= { onKeyUp }
					onKeyDown		= { onKeyDown }
					onClick			= { onClick }
					onFocus			= { onFocus }
					autoFocus		= { autoFocus }
					onBlur			= { onBlur ? e => onBlur(e.target.value)  : null }
					{...props}
				/>
				{
					$fn.hasObject(btn) && !btn.hide && <Button className='ml10' {...btn} disabled={btn.disabled !== undefined ? btn.disabled : disabled} onClick={()=> btn.onClick && btn.onClick(value)} />
				}
				{ AfterSuffix }
				{ afterText && <span className='f12 ml5 g9'>{afterText}</span>}
			</div>
		)
	}
}
export default Index